<template>
  <div class="targetCostMeasure">
    <el-row class="one_row">
      <el-form :model="requestParam"
               label-width="140px">
        <el-col :span="8">
          <el-form-item label="编制机构">
            <el-input v-model="requestParam.preparationAgency"
                      placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单据编号">
            <el-input v-model="requestParam.Code"
                      placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="编制人">
            <el-input v-model="requestParam.contractName"
                      placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
              <el-form-item label="单据状态">
              <el-input v-model="requestParam.contractName"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col> -->
      </el-form>
    </el-row>
    <el-row class="two_row">
      <el-form :model="requestParam"
               label-width="140px">
        <el-col :span="8"
                class="time">
          <el-form-item label="编制日期">
            <el-date-picker v-model="requestParam.timeValue"
                            type="datetimerange"
                            style="width:100%;"
                            :default-time="['12:00:00']"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            placeholder="选择时间范围">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8" class="time">
              <el-form-item label="编制日期">
                <el-date-picker
                  v-model="requestParam.timeValue2"
                  type="datetimerange"
                  style="width:100%;"
                  :default-time="['12:00:00']"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围">
                </el-date-picker>
            </el-form-item>
          </el-col>   -->
        <el-col :span="8"
                :offset="8"
                style="text-align:right;">
          <el-button type="primary"
                     @click="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-col>
      </el-form>
    </el-row>
    <!-- <el-row class="three_row">
        <el-col :span="8">
        
            <div>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="reset">重置</el-button>
          </div>
      </el-col>
      </el-row> -->
    <el-table :highlight-current-row="true"
              border
              :header-cell-style="{ background: '#f5f5f5' }"
              :data="tableData.list"
              height="610px">
      <el-table-column prop="serial_number"
                       label="序号"
                       align="center"
                       width="100px"
                       type="index"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="preparation_agency"
                       label="编制机构"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="Code"
                       label="单据编号"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <!-- <el-table-column prop="scheduled_date"
                         label="计划日期"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column> -->
      <!-- <el-table-column prop="document_status"
                         label="单据状态"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column> -->
      <el-table-column prop="compiler"
                       label="编制人"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="weave_date"
                       label="编制日期"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="create_at"
                       label="同步时间"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="BizDate"
                       label="测算日期"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="CSMB_Name"
                       label="测算模块"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="YJE"
                       label="原金额"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="master_bill_id"
                       label="外部id"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作"
                       width="200px"
                       align="center">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="details(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handlePageChange"
                   @size-change="handleSizeChange"
                   :current-page="requestParam.page"
                   :page-size="requestParam.page_size"
                   layout="total,sizes,prev, pager, next, jumper"
                   background
                   :total="tableData.total_count"
                   align="center">
    </el-pagination>
  </div>
</template>
  
  <script>
import { BulkManageApi } from "@/services/ResourceCentre";
export default {
  components: {

  },
  data () {
    return {
      requestParam: {
        project_id: '',
        preparationAgency: '',
        is_page: 1,
        page: 1,
        page_size: 10,
        Code: '',
        contractName: '',
        time: '',
        createdPeople: '',
        timeValue: '',
        timeValue2: '',
        start_date: '',
        end_date: '',
        Name: '',
      },
      resetParam: {
        project_id: '',
        preparationAgency: '',
        is_page: 1,
        page: 1,
        page_size: 10,
        Code: '',
        contractName: '',
        time: '',
        createdPeople: '',
        timeValue: '',
        timeValue2: '',
        start_date: '',
        end_date: '',
        Name: '',
      },
      tableData: {
        list: [],
        page: 1,
        total_count: 0
      }
    };
  },
  methods: {
    // 查询
    search () {
      this.requestParam.page = 1
      this.getData()
    },
    // 重置
    reset () {
      let resetParam = JSON.parse(JSON.stringify(this.resetParam));
      this.requestParam = Object.assign(this.requestParam, resetParam);
      this.getData()
    },
    handlePageChange (page) {
      this.requestParam.page = page
      this.getData()
    },
    // 每页数量
    handleSizeChange (page_size) {
      this.requestParam.page_size = page_size;
      this.getData()
    },
    // 将标准时间转化为2022-12-08 02:02:10
    timeInvert (time) {
      for (let i = 0; i < time.length; i++) {
        let date2 = new Date(time[i]);
        // 获取年
        let year = date2.getFullYear();
        // 获取月
        let mon = date2.getMonth() + 1;
        if (mon < 10) {
          mon = '0' + mon
        }
        // 获取日
        let day = date2.getDate();
        if (day < 10) {
          day = '0' + day
        }
        // 获取小时
        let hours = date2.getHours();
        if (hours < 10) {
          hours = '0' + hours
        }
        console.log(hours);
        // 获取分钟
        let min = date2.getMinutes();
        if (min < 10) {
          min = '0' + min
        }
        // 获取秒
        let sec = date2.getSeconds();
        if (sec < 10) {
          sec = '0' + sec
        }
        let times = year + "-" + mon + "-" + day + " " + hours + ":" + min + ":" + sec;
        if (i == 0) {
          this.requestParam.start_date = times;
        } else {
          this.requestParam.end_date = times;
        }
      }
    },
    getData () {
      // 从仓库里面获取id
      let choosedProject = this.$store.state.choosedProject || {};
      let projectId = choosedProject.project_id;
      // 判断id是否存在，不存在就从本地获取id
      if (projectId) {
        this.requestParam.project_id = projectId
      } else {
        let choosedProject = JSON.parse(localStorage.getItem('choosedProject'));
        let projectId = choosedProject.project_id;
        this.requestParam.project_id = projectId;
      }
      // 判断存储日期的timeValue是否不为空
      if (this.requestParam.timeValue) {
        this.timeInvert(this.requestParam.timeValue)
      } else {
        this.requestParam.start_date = '',
          this.requestParam.end_date = ''
      }
      BulkManageApi.getTargetCostEstimation({
        params: this.requestParam
      }).then(res => {
        if (res.code === 0) {
          this.tableData = res.data
        }
      })
    },
    //  详情
    details (row) {
      // this.$router.push({
      //   // name:'目标成本测算详情',
      //   path:'targetCostMeasureDetails',//目标成本测算详情
      //   parmas:{
      //     master_bill_id:row.master_bill_id,
      //     requestParam:row
      //   }
      // })
      window.localStorage.setItem('uniqueObj', JSON.stringify(row))
      this.$router.push({ path: '/targetCostMeasureDetails', query: { master_bill_id: row.master_bill_id } })
    }
  },
  created () {

  },
  mounted () {
    this.getData()
  },
};
  </script>
  
  <style scoped lang="scss">
/deep/ .el-range-separator {
  width: 12% !important;
}
/deep/ .el-date-editor--timerange.el-input__inner {
  width: 258px !important;
}
/deep/ .el-date-editor--datetimerange.el-input__inner {
  width: 258px;
}
.targetCostMeasure {
  width: 100%;
  padding: 20px;

  .three_row {
    width: 100%;
    margin-bottom: 20px;
    .el-col {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}
</style>
  